<template>
    <div style="border: 1px solid #ccc;padding: 20px; margin: 10px;">
         <el-button type="success" @click="AddNoe">新增菜单</el-button>
        <el-table :data="tableData" style="width: 100%" border>
        <el-table-column fixed type="index" label="编号" width="180" />
        <el-table-column prop="menuName" label="菜单名称" width="180" />
        <el-table-column prop="url" label="菜单Url" width="180" />
        <el-table-column prop="partMenuName" label="父级菜单名称" width="180"/>
         <el-table-column prop="createTime" label="创建时间" width="180">
            <template #default="scope">
                {{moment(scope.row.createTime).format("YYYY-MM-DD HH:ss:mm")}}
            </template>
         </el-table-column>
          <el-table-column prop="creater" label="创建人" width="180"/>
        <el-table-column prop="updater" label="修改人" width="180" />
        <el-table-column prop="updateTime" label="修改日期" width="180" >
             <template #default="scope">
                {{scope.row.updateTime ?moment(scope.row.updateTime).format("YYYY-MM-DD HH:ss:mm"):""}}
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="180">
        <template #default="scope">
            <el-button  type="danger" size="small" @click="Remove(scope.row.id)">删除</el-button>
            <el-button  type="primary" size="small" @click="update(scope.row)">修改</el-button>
        </template>
        </el-table-column>
    </el-table>
     <!-- 菜单新增 -->
      <el-dialog v-model="dialogVisible"title="添加菜单"width="500">
         <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
  >
    <el-form-item label="父级菜单" prop="url">
      <el-cascader :options="options" v-model="ruleForm.partentId" :props="props1" placeholder="请选择" @change="handleChange"  clearable />
    </el-form-item>
    <el-form-item label="菜单名称" prop="menuName">
      <el-input v-model="ruleForm.menuName" />
    </el-form-item>
    <el-form-item label="菜单路由" prop="url">
      <el-input v-model="ruleForm.url" />
    </el-form-item>
   
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        保存
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
      </el-dialog>
      <!-- 菜单修改 -->
      <el-dialog v-model="UpdialogVisible"title="修改菜单"width="500">
         <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="Menudata"
    :rules="rules"
    label-width="auto"
  >
    <el-form-item label="父级菜单" prop="url">
      <el-cascader :options="options" v-model="Menudata.partentId" :props="props1" placeholder="请选择" @change="handleChange"  clearable />
    </el-form-item>
    <el-form-item label="菜单名称" prop="menuName">
      <el-input v-model="Menudata.menuName" />
    </el-form-item>
    <el-form-item label="菜单路由" prop="url">
      <el-input v-model="Menudata.url" />
    </el-form-item>
   
    <el-form-item>
      <el-button type="primary" @click="UpsubmitForm(ruleFormRef)">
        更新
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
      </el-dialog>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import moment  from 'moment'
import {ref,reactive, onMounted}from 'vue'
import { ElMessage, type FormInstance, type FormRules ,ElMessageBox} from 'element-plus'
import { Read,Write } from '@/http/interceptors'

//#region  获取菜单列表
const tableData=ref([])
onMounted(()=>{
  GetMenu();
})
const GetMenu=()=>{
    Read.get("/api/MenuGetMenuList",{}).then(res=>{
        tableData.value=res.data.pageData
    })
}
//#endregion

//#region  菜单新增

//================级联===================

const props1 = ref({
  value:"id",
  label:"menuName",
  children:"children",
  checkStrictly:true,
  emitPath:false
});

const options = ref([])

const handleChange = (value:any) => {
  console.log(value)
  ruleForm.partentId=value
}

onMounted(()=>{
    GetTree();
})

const GetTree=()=>{
    Read.get("/api/MenuGetMenuTree",{}).then(res=>{
        options.value=res.data.data
    })
}

//================================新增==================

const dialogVisible = ref(false)  
const AddNoe=()=>{
  dialogVisible.value=true
  ruleForm.menuName="";
  ruleForm.url=""
  ruleForm.partentId=0
}

const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive({
  "menuName": "",
  "url": "",
  "partentId": 0
})

const locationOptions = ['Home', 'Company', 'School']

const rules = reactive<FormRules>({
  menuName: [
    { required: true, message: '菜单名称不能为空', trigger: 'blur' },
  ],
  url: [
    { required: true, message: '菜单路由不能为空', trigger: 'blur' },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      
      Write.post("/api/MenuCreateMenu",ruleForm).then(res=>{
        if(res.data.code==200)
        {
            ruleForm.partentId=res.data.data.id
            dialogVisible.value=false
            ruleForm.menuName="";
            ruleForm.url="";
            Menudata.partentId=0;
            GetMenu();
           ElMessage.success(res.data.message)
        }
        else{
          ElMessage.error(res.data.message)
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

//#endregion

//#region   菜单删除


const Remove=(id:any)=>{
  ElMessageBox.confirm(
    '确认删除吗?',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      Write.delete("/api/MenuDeleteMenu",{params:{Id:id}}).then(res=>{
        if(res.data.code==200)
        {
          ElMessage.success(res.data.message)
          GetMenu();
        }
        else
        {
          ElMessage.error(res.data.message)
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })

}


//#endregion

//#region  菜单修改

const UpdialogVisible=ref(false)

//用来绑定级联
const parentMenuPath = ref([]); 

const update=(row:any)=>{
  console.log('数据',row)
  UpdialogVisible.value=true
  Object.assign(Menudata,row)
 
}

const Menudata=reactive({
  "id": 0,
  "menuName": "",
  "url": "",
  "partentId": 0
})

const UpsubmitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      
      Write.put("/api/MenuUpdateMenu",Menudata).then(res=>{
        if(res.data.code==200)
        {
            UpdialogVisible.value=false
            ruleForm.menuName="";
            ruleForm.url="";
            ruleForm.partentId=0;
            GetMenu();
           ElMessage.success(res.data.message)
        }
        else{
          ElMessage.error(res.data.message)
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

//#endregion
</script>

<style scoped>

</style>